<template>
  <div class="device-detail-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2>{{ $t('deviceDetail.title') }}</h2>
    </div>

    <!-- 标签页 -->
    <el-tabs v-model="activeTab" class="device-detail-tabs">
      <el-tab-pane :label="$t('deviceDetail.stationOverview')" name="station">
        <StationOverview />
      </el-tab-pane>
      <el-tab-pane :label="$t('deviceDetail.pcs')" name="pcs">
        <PCSMonitor />
      </el-tab-pane>
      <el-tab-pane :label="$t('deviceDetail.bms')" name="bms">
        <BMSMonitor />
      </el-tab-pane>
      <el-tab-pane :label="$t('deviceDetail.video')" name="video">
        <VideoMonitor />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import StationOverview from './components/StationOverview.vue'
import PCSMonitor from './components/PCSMonitor.vue'
import BMSMonitor from './components/BMSMonitor.vue'
import VideoMonitor from './components/VideoMonitor.vue'

const activeTab = ref('station')
</script>

<style scoped>
.device-detail-container {
  height: 100vh;
  padding: 20px;
  background: #f5f7fa;
  overflow: hidden;
}

.page-header {
  background: #fff;
  padding: 16px 24px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.page-header h2 {
  margin: 0;
  color: #303133;
  font-size: 20px;
  font-weight: 500;
}

.device-detail-tabs {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  height: calc(100vh - 140px);
}

:deep(.el-tabs__content) {
  height: calc(100% - 60px);
  overflow: auto;
  padding: 20px;
}

:deep(.el-tab-pane) {
  height: 100%;
}
</style>